import './index.less';
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
export default function IndexPage() {
  // 数据
  let [list, setList] = useState([
    { id: 1, name: '候宇航', content: '' },
    { id: 2, name: '陈建鹏', content: '' },
    { id: 3, name: '常鹏鹏', content: '' },
    { id: 4, name: '李雨恒', content: '' },
    { id: 5, name: '赵家兴', content: '' },
    { id: 6, name: '赵金波', content: '' },
    { id: 7, name: '刘金金', content: '' },
    { id: 8, name: '王怡腾', content: '' },
    { id: 9, name: '周峥峥', content: '' },
    { id: 10, name: '常谭飞', content: '' },
    { id: 11, name: '赵晗琪', content: '' },
    { id: 12, name: '李博阳', content: '' },
    { id: 13, name: '陈亚东', content: '' },
    { id: 14, name: '柴晓静', content: '' },
    { id: 15, name: '冯晓雯', content: '' },
    { id: 16, name: '王烨', content: '' },
    { id: 17, name: '唐洪洋', content: '' },
    { id: 18, name: '贾岳杰', content: '' },
    { id: 19, name: '王天林', content: '' },
    { id: 20, name: '秦亚凯', content: '' },
    { id: 21, name: '刘恒谊', content: '' },
    { id: 22, name: '卢阳', content: '' },
    { id: 23, name: '赵苗苗', content: '' },
    { id: 24, name: '田嘉玲', content: '' },
    { id: 25, name: '何旭', content: '' },
    { id: 26, name: '白亚楠', content: '' },
    { id: 27, name: '蒋依琳', content: '' },
    { id: 28, name: '刘闯', content: '' },
    { id: 29, name: '范晓涵', content: '' },
    { id: 30, name: '栗鹏杰', content: '' },
    { id: 31, name: '尚泽', content: '' },
    { id: 32, name: '韩永强', content: '' },
    { id: 33, name: '黄永胜', content: '' },
    { id: 34, name: '陈雪谊', content: '' },
    { id: 35, name: '冯子康', content: '' },
    { id: 36, name: '赵林辉', content: '' },
    { id: 37, name: '刘津芳', content: '' },

  ])
  // 开始 / 停止
  let [ButtonState, setButtonState] = useState(false)
  // 被选中的幸运儿
  let [xye, setxye] = useState({})
  // 定时器
  let [timer, settimer] = useState()
  // 点击开始按钮触发定时器
  const dian = (state) => {
    if (!state) {
      if (timer) {
        clearInterval(timer)
      }
      let time = setInterval(suan, 40);
      setButtonState(true)
      settimer(time)
    } else {
      setButtonState(false)
      clearInterval(timer);
      let arr = [];
      let namelist = JSON.parse(localStorage.getItem('namelist'))
      if (namelist) {
        let sta = namelist.some((item) => {
          return item.name === xye.name
        })
        if (sta) {
          alert(`${xye.name}已被选到过，请重新选择`)
        } else {
          namelist.push(xye)
          localStorage.setItem('namelist', JSON.stringify(namelist))
        }
      } else {
        arr.push(xye)
        localStorage.setItem('namelist', JSON.stringify(arr))
      }
    }

  }
  //全部变为false
  const turnfalse = () => {
    let arr = [...list];
    arr.forEach(i => { i.sta = false })
    setList(arr)
  }
  // 选中变色
  const suan = () => {
    turnfalse()
    let arr = [...list];
    let num = Math.floor(Math.random() * list.length);
    arr[num].sta = true
    setxye(arr[num])
    setList(arr)
  }
  // 结束
  const end = () => {
    clearInterval(timer);
    let arr = [];
    let namelist = JSON.parse(localStorage.getItem('namelist'))
    if (namelist) {
      let sta = namelist.some((item) => {
        return item.name === xye.name
      })
      if (sta) {
        alert(`${xye.name}已被选到过，请重新选择`)

      } else {
        namelist.push(xye)
        localStorage.setItem('namelist', JSON.stringify(namelist))
      }
    } else {
      arr.push(xye)
      localStorage.setItem('namelist', JSON.stringify(arr))
    }
  }

  // 渲染
  return (
    <div className="outbox">
      {/* 导入导出按钮 */}
      <div className="top_top">
        <button>导入</button>
        <button>导出</button>
      </div>
      <div className="top">
        <h1>随机点名</h1>
      </div>
      <div className="mainbox">
        {
          list.map(i => {
            return <li key={i.id} style={{ backgroundColor: i.sta ? 'red' : 'lightgreen' }} className="classmate">{i.name}</li>
          })
        }
      </div>
      <div className='foot'>
        <button className={ButtonState ? "btnTrue" : "btn"} onClick={() => { dian(ButtonState) }} >{ButtonState ? "结束" : "开始"}</button>
        {/* <button className="btn" onClick={() => { end() }}>结束</button> */}
        <button className="btn"><Link to="/home">学生信息</Link></button>
        <button className="btn" onClick={() => { localStorage.clear(); turnfalse(); end() }}>重置</button>
      </div>
    </div>
  );
}
